/* 
1:鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏
2：点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮一样的道理；
3：图片播放的同时，小圆点跟着一起变化
4：点击小圆点还可以播放相应的图片
5：鼠标不经过轮播图，轮播图会自动播放
6：鼠标经过轮播图 ，自动播放停止
*/

window.addEventListener('load', function () {
  // 1获取元素
  var arrow_l = document.querySelector('.arrow-l');   //左边按钮
  var arrow_r = document.querySelector('.arrow-r');   //右边按钮
  var focus = document.querySelector('.focus');  //父盒子  宽度和图片宽度是一样的
  var ul = focus.querySelector('ul')

// js代码获取父盒子的实际宽度--> 就是每一次ul移动的距离
  var focusWidth = focus.offsetWidth;
  
  // 2鼠标经过轮播图模块，左右按钮显示
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    // 鼠标经过轮播图 ，自动播放停止
    clearInterval(timer)
    timer = null;  //清除定时器变量
  })

  // 3离开左右按钮隐藏

  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    // 鼠标不经过轮播图，轮播图会自动播放
    timer = setInterval(function(){
        arrow_r.click()
    }, 2000);
  })


  // 4 动态生成小圆点  有几张图片 就生成几个小圆点
  var ol = focus.querySelector('.circle');
  console.log(ul.children.length,"*")
  for (var i = 0; i < ul.children.length; i++){
    //  创建一个li
    var li = document.createElement('li');
    // 自定义属性index 值为索引号
    li.setAttribute('index', i);
    // 把li插入到ol里面
    ol.appendChild(li);

    // 5 给小圆点添加点击事件
    li.addEventListener('click', function () {
      //  清空所有ol中li的样式
      for (var j = 0; j < ol.children.length; j++){
        ol.children[j].className = "";
      }
      this.className = 'current';

      // 点击小圆点，移动图片  ul移动
      // 点击li  可以获取到当前li的索引号
      var ind = this.getAttribute('index');
      // console.log(ind,"ind")
      //  把点击的li的索引号给num
      num = ind;
      // 把li的索引和给cicle
      circle = ind;

      animate(ul, -ind * focusWidth);
    })
  }

  // 把ol里面的第一个小li设置类名
  ol.children[0].className = 'current';

  // 6复制第一张图片放到ul最后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);

  // 点击右侧按钮  图片滚动一张   刚开始没有滚动  默认值为0
  var num = 0;
  // 控制小圆点的播放
  var circle = 0;


  // 点击右侧按钮一次，图片往左播放一张
  // 第一次点击  ul移动了一张图片的距离
  // 再次点击    ul移动了两张图片的距离
  // 第四次点击   ul移动四张图片距离
  arrow_r.addEventListener('click', function () {
    //  console.log(num)
    // 如果走到了最后一张图片， 我们的ul要快速复原left 改为0
    // num = 4
    if (num === ul.children.length - 1) {  //第一张
      ul.style.left = 0;
      num = 0
    }
    num++;   //1   0 ---1 不会有1秒的停留  立马变
    
    animate(ul, -num * focusWidth);   //2张

    // 点击右侧按钮 ，小圆点要一起变化
    circle++;
    if (circle == ol.children.length) {
      circle = 0
    }
    circleChange()

  })


  // 点击左侧按钮
  arrow_l.addEventListener('click', function () {
    if (num === 0) {
      num = ul.children.length - 1
      ul.style.left = -num * focusWidth + 'px';
    }
    num--;
    animate(ul, -num * focusWidth);
      // 点击右侧按钮 ，小圆点要一起变化
      circle--;
      circle = circle < 0 ? ol.children.length - 1: circle
      circleChange()
  })



    // 控制小圆点样式
  function circleChange () {
    // 排他思想
    for (var i = 0; i < ol.children.length; i++){
      ol.children[i].className = '';
    }
    ol.children[circle].className = "current"
  }


  // 自动播放轮播图
  var timer = setInterval(function () {
    // 自动调用点击事件
    arrow_r.click()
  },2000)
  

})



